<template>
	<view>
		<view v-if="visible" class="su-nodata " :style="{marginTop:marginTop+'rpx'}"
			:class="[isFixed?'fixed':'']">
			<image v-if="imgUrl" mode="aspectFill" :src="imgUrl" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}" />
			<view v-else class="su-content-icon">
				<text :class="[prefixIcon,icon,'su-ticon']" :style="iconStyle"></text>
			</view>
			<view class="su-content-text">
				<text :style="textStyle">{{content}}</text>
			</view>
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 暂无数据组件 v1.1
	 * @author: Jie.
	 * @date: 2020-03-13
	 */
	export default {
		props: {
			prefixIcon: {
				type: String,
				default: 'iconfont'
			},
			imgUrl: {
				type: String,
				default: ""
			},
			icon: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: '暂无数据~'
			},
			imgWidth: {
				type: [Number,String],
				default: 300
			},
			imgHeight: {
				type: [Number,String],
				default: 300
			},
			marginTop: {
				type: [Number,String],
				default: -70
			},
			iconStyle:{
				type: String,
				default:""
			},
			textStyle:{
				type: String,
				default:""
			},
			isFixed:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {
				visible:false
			}
		},
		methods: {
			show(){
				this.visible = true
			},
			hide(){
				this.visible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.su-nodata.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 50%;
		z-index: 0;
	}
	.su-nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.su-content-icon>.su-ticon {
			font-size: 230upx;
			line-height: 120upx;
			color: #b1b1b1;
		}
		.su-content-text {
			font-size: 32upx;
			color: #b9b9b9;
			padding-top: 30upx;
			text-align: center;
		}
	}
</style>
